<style>
    .nav li{
        cursor: pointer;
    }
    .commodity-tbody td,.commodity-thead th{
        vertical-align: middle !important;
        text-align: center;
    }
    img.index_img_url{
        width: 50px;
    }
</style>
@include('base.loading_admin')
<meta name="csrf-token" content="{{ csrf_token() }}">
<main id="commodity" class="commodity">
    <nav id="commodity_nav" class="commodity_nav">
        <ul class="nav nav-pills ">
            <li role="presentation" class="active"><a href="{{asset($nav['one']['url'])}}">{{$nav['one']['name']}}</a></li>
            <li role="presentation"><a href="{{asset($nav['two']['url'])}}">{{$nav['two']['name']}}</a></li>
            <li role="presentation"><a href="{{asset($nav['three']['url'])}}">{{$nav['three']['name']}}</a></li>
        </ul>
    </nav>
    <ul class="nav nav-pills" id="parent_nav">
        @foreach($classify as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a></li>
        @endforeach
    </ul>
    <ul class="nav nav-pills" id="children_nav">
        @foreach(reset($classify)['data'] as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a></li>
        @endforeach
    </ul>
    <table class="table table-striped commodity-table" id="commodity_list">
        <thead class="commodity-thead">
        <th>编号</th>
        <th>品名</th>
        <th>商品标题</th>
        <th>图片</th>
        <th>操作</th>
        </thead>
        <tbody class="commodity-tbody">
        </tbody>
    </table>
</main>
<script>
    var classify = {}
    var commodity = {}
    $.post('/admin/commodity/api_classify/get_all_classify',{
        _token: $('meta[name="csrf-token"]').attr('content'),
    },function (data) {
        if(data.errorCode == 0){
            classify = data.data
            $('#parent_nav li').eq(0).click()
        }
    })
    $('#parent_nav').on('click','li',function () {
        var th = $(this)
        $('#parent_nav li').attr('class','')
        th.attr('class','active')
        children_nav_load(classify[th.attr('data-parent-id')].data)
    })

    function children_nav_load(data) {
        let html  = ''
        for (k in data){
            html+='<li role="presentation" data-parent-id="'+data[k].commodity_classify_id+'"><a>'+data[k].classify_name+'</a></li>'
        }
        $('#children_nav').html(html)
        $('#children_nav li').eq(0).click()
    }
    $('#children_nav').on('click','li',function () {
        loading.show()
        var th = $(this)
        $('#children_nav li').attr('class','')
        th.attr('class','active')
        $.post('/admin/commodity/api_commodity/get_children_commodity',{
            _token: $('meta[name="csrf-token"]').attr('content'),
            classify:th.attr('data-parent-id')
        },function (data) {
            if(data.errorCode == 0){
                commodity = data.data
                commodity_load(commodity)
            }else {
                $('.commodity-tbody').html('')
            }
            loading.hide()
        })
    })
    function commodity_load(data) {
        let html  = ''
        for (k in data){
            html+='<tr>\n' +
                '            <td>'+data[k].commodity_id+'</td>\n' +
                '            <td>'+data[k].commodity_name+'</td>\n' +
                '            <td>'+data[k].commodity_title+'</td>\n' +
                '            <td><img  class="index_img_url" src="'+data[k].index_img_url+'" alt=""></td>\n' +
                '            <td>nothing</td>\n' +
                '        </tr>'
        }
        $('.commodity-tbody').html(html)
    }
</script>